/**
 * 默认主题下 $color-border-light
 */

@mixin hairline-common() {
  content: '';
  position: absolute;
  transform-origin: center;
  box-sizing: border-box;
  pointer-events: none;
}

@mixin hairline-base(
  $color: $color-border-light,
  $style: solid
) {
  @include hairline-common();

  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  border: 0 $style $color;
  //transform: scale(0.5);
}

@mixin hairline-surround(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-width: $width;
  }
}

@mixin hairline-top(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  //position: relative;
  border-top-color: $color;
  border-top-style: $style;
  border-top-width: $width;

  //&::after {
  //  @include hairline-base($color, $style);
  //  border-top-width: $width;
  //}
}

@mixin hairline-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  //position: relative;
  border-bottom-color: $color;
  border-bottom-style: $style;
  border-bottom-width: $width;
  //&::after {
  //  @include hairline-base($color, $style);
  //  border-bottom-width: $width;
  //}
}

@mixin hairline-left(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-left-width: $width;
  }
}

@mixin hairline-right(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-right-width: $width;
  }
}

@mixin hairline-top-bottom(
  $color: $color-border-light,
  $style: solid,
  $width: 1px
) {
  position: relative;

  &::after {
    @include hairline-base($color, $style);

    border-top-width: $width;
    border-bottom-width: $width;
  }
}

@mixin hairline-bottom-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1px,
  $left: 0
) {
  position: relative;
  border-bottom-width: $width;
  border-bottom-style: $style;
  border-bottom-color: $color;

  &::after {
    //@include hairline-common();
    //top: auto;
    //left: $left;
    //right: 0;
    //bottom: 0;
    ////transform: scaleY(0.5);
    //border-bottom: $width $style $color;
  }
}

@mixin hairline-top-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1px,
  $left: 0
) {
  //position: relative;
  border-top-width: $width;
  border-top-style: $style;
  border-top-color: $color;

  &::before {
    /*postcss-pxtransform rn eject enable*/
    @include hairline-common();
    top: 0;
    left: $left;
    right: 0;
    bottom: auto;
    //transform: scaleY(0.5);
    border-top: $width $style $color;
    /*postcss-pxtransform rn eject disable*/
  }
}

@mixin hairline-left-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1px,
  $top: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: 0;
    right: auto;
    bottom: 0;
    //transform: scaleX(0.5);
    border-left: $width $style $color;
  }
}

@mixin hairline-right-relative(
  $color: $color-border-light,
  $style: solid,
  $width: 1px,
  $top: 0
) {
  position: relative;

  &::after {
    @include hairline-common();

    top: $top;
    left: auto;
    right: 0;
    bottom: 0;
    transform: scaleX(0.5);
    border-right: $width $style $color;
  }
}
